<template>
	<div class="app-container">
		<el-card style="width: 100%; margin-bottom:20px;">
			<div style="display:flex; justify-content: space-between;">
				<div style=" display:flex; color:#787878; font-size:14px;">
					<div style="width: 240px; margin-right:40px;">
						统计时间
						<div class="dis mar-right10">
							<span class="time-cycle__item" @click.stop="statisticsClick(1)" :class="timeStatistics === 1?'curr':''">本月</span>
							<span class="time-cycle__item" @click.stop="statisticsClick(2)" :class="timeStatistics === 2?'curr':''">最近3个月</span>
							<span class="time-cycle__item" @click.stop="statisticsClick(3)" :class="timeStatistics === 3?'curr':''">最近6个月</span>
						</div>
					</div>
					<div style="width: 400px; margin-right:40px;">
            <el-date-picker v-model="birthday_start" style="width: 140px;margin-left: 5px;"
                            value-format="yyyy-MM-dd" size="small" type="datetime" placeholder="开始时间" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
            <el-date-picker v-model="birthday_end" style="width: 140px;margin-left: 5px;"
                            value-format="yyyy-MM-dd" size="small" type="datetime" placeholder="截至日期" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
					</div>
					<div style="width: 140px; margin-right:40px;">
						老师<br>
						<el-select v-model="staffIndex" placeholder="Select" size="large" style="width: 140px">
							<el-option v-for="item in staff" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</div>
					<div style="width: 140px; margin-right:40px;">
						课程类型<br>
						<el-select v-model="statusIndex" placeholder="Select" size="large" style="width: 140px">
							<el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</div>
					<div style="width: 240px; margin-top: 15px;">
						<el-button type="primary" size="small" @click.stop="getList">
							搜索
						</el-button>
						<el-button type="primary" size="small">
							导出报表
						</el-button>
					</div>
				</div>
			</div>
		</el-card>

		<el-card style="margin-bottom: 10px; font-size: 14px;">
			团课上课<span style="color:#41c3a8;">{{ list.total.league_num }}</span>次，精品课上课<span
				style="color:#41c3a8;">{{ list.total.boutique_num }}</span>次，私教上课<span
				style="color:#41c3a8;">{{ list.total.private_num }}</span>次，总计上课<span
				style="color:#41c3a8;">{{ list.total.total_num }}</span>次，团课课时费金额共<span
				style="color:#41c3a8;">{{ list.total.league_course_fee }}</span>元，精品课课时费金额共<span
				style="color:#41c3a8;">{{ list.total.boutique_course_fee }}</span>元，私教课时费金额共<span
				style="color:#41c3a8;">{{ list.total.private_course_fee }}</span>元，课时费总金额共<span
				style="color:#41c3a8;">{{ list.total.total_course_fee }}</span>元
		</el-card>

		<el-table ref="singleTable" v-loading="listLoading" :row-style="{ background: '#f2f2f2' }" style="width: 100%"
			stripe :data="list.course" highlight-current-row @current-change="handleSelectionChange">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column label="老师">
				<template slot-scope="{row}">
					<span>{{ row.coach_name }}</span>
				</template>
			</el-table-column>

			<el-table-column label="课程类型">
				<template slot-scope="{row}">
					<span v-if="row.type == 1">团课</span>
          <span v-if="row.type == 2">精品课</span>
          <span v-if="row.type == 3">私教课</span>
				</template>
			</el-table-column>

			<el-table-column label="课程名称">
				<template slot-scope="{row}">
					<span>{{ row.course_name }}</span>
				</template>
			</el-table-column>

			<el-table-column label="上课次数">
				<template slot-scope="{row}">
					<span>{{ row.sk_count }}</span>
				</template>
			</el-table-column>

			<el-table-column label="课时费金额">
				<template slot-scope="{row}">
					<span>{{ row.sk_money }}</span>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="list.count>0" :total="list.count" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />

		<div class="normal-padding normal-description" style="font-size: 14px;">
			<div class="normal-description__title">统计说明</div>
			<div class="normal-description__content">
				<div class="normal-description__item">
					<div class="normal-description__text">1、团课统计规则：当前时间过了课表中“课程开始时间”且未取消的课程将自动统计该课程中对应<span
							class="emp-alias">老师</span>课时费；多人预约同一节课，课时费只统计一次，不重复统计；</div>
				</div>
				<div class="normal-description__item">
					<div class="normal-description__text">2、私教（排课模式）统计规则：当前时间过了课表中“课程开始时间”且未取消的课程，有预约：系统将自动统计该课程中对应<span
							class="emp-alias">老师</span>课时费；无预约：系统将不统计该课程中对应<span
							class="emp-alias">老师</span>课时费；多人预约同一节课，课时费只统计一次，不重复统计；</div>
				</div>
				<div class="normal-description__item">
					<div class="normal-description__text">
						3、私教（非排课模式）统计规则：按预约为统计标准，课程被预约且未取消，则课时费正常统计；多人预约同一节课，课时费只统计一次，不重复统计。</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {
    statisticsCoach,
  } from '@/api/finance'
  import {
    getVenue,
  } from '@/api/venue'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
  import { SchedClassfeeDel } from '@/api/coures';
	export default {
		name: 'statisticsCoach',
		components: {
			Pagination
		},
		data() {
			return {
				value1: [],
				list: null,
				total: 0,
				listLoading: true,
        timeStatistics: 1,
        birthday_start:'',
        birthday_end:'',
        staffIndex:'全部',
        staff: {},
				listQuery: {
					page: 1,
					limit: 10
				},
				status: [
          {
						'id': 0,
						'name': '全部'
					},{
						'id': 1,
						'name': '团课'
					},{
						'id': 2,
						'name': '精品课'
					},{
            'id': 3,
            'name': '私教课'
          }
				],
				statusIndex: '全部'
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '课时费统计',
				url: '/finance/statisticsCoach',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
      this.timeCreated(1)
      this.getVenue(1)
      this.getList()
		},
		methods: {
      getVenue(){
        getVenue({}).then(response => {
            const {
              data
            } = response
          this.staff = data
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
      },
      timeCreated(index){
        var now = new Date();
        var month = now.getMonth();
        var year = now.getFullYear();
        var first = new Date(year, month, 1);
        var first2 = new Date(year, month-3, 1);
        var last2 = new Date(year, month, 1);
        var first3 = new Date(year, month-6, 1);
        var last3 = new Date(year, month, 1);
        if(index === 1){
          this.birthday_start = first
          this.birthday_end = now
        }else if(index === 2){
          this.birthday_start = first2
          this.birthday_end = last2
        }else if(index === 3){
          this.birthday_start = first3
          this.birthday_end = last3
        }
      },
      statisticsClick(index){
        if(index !== this.timeStatistics){
          this.timeStatistics = index
          this.timeCreated(index)
        }
      },
      timeChange(e){
        this.timeStatistics = 0
      },
			getList() {
				this.listLoading = true
        statisticsCoach({
          "limit":this.listQuery.limit,
          "page":this.listQuery.page,
          "startTime":this.birthday_start,
          "endTime":this.birthday_end,
          "staffIndex": this.staffIndex,
          "statusIndex": this.statusIndex
        }).then(response => {
          const {
            data
          } = response
            this.listQuery.page = data.current_page
            this.total = data.total
            this.list = {
              'count': data.total,
              'total': {
                'league_num': data.tkskcs,
                'league_course_fee': data.tkksf,
                'boutique_num': data.jpkskcs,
                'boutique_course_fee': data.jpkksf,
                'private_num': data.sjkskcs,
                'private_course_fee': data.sjkksf,
                'total_num': data.zskcs,
                'total_course_fee': data.zksf
              },
              'course': data.data,
            }
          this.listLoading = false
          this.shuaVisible = false
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
	.time-cycle__item:first-child {
		border-radius: 4px 0 0 4px;
	}

	.time-cycle__item {
		position: relative;
		margin-left: -1px;
		width: 74px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #d9d9d9;
		cursor: pointer;
	}

	.time-cycle__item:last-child {
		border-radius: 0 4px 4px 0;
	}

	.normal-description {
		padding-top: 30px;
		margin-bottom: 5px;
	}

	.normal-padding {
		padding: 0 63px;
	}

	.normal-description__title {
		font-size: 12px;
		color: #787878;
		height: 22px;
	}

	.normal-description__content {
		padding: 12px 20px;
		background: #f6f6f6;
		line-height: 30px;
	}

	.normal-description__item {
		position: relative;
		padding-left: 25px;
		line-height: 1.8;
	}
  .time-cycle__item.curr {
    border: 1px solid #6b7cdd;
    color: #6b7cdd;
    z-index: 2;
  }
</style>
